<template>
  <a-modal
    :title="title"
    width="90%"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="selectOk"
    @cancel="handleCancel"
    :maskClosable="false">

    <a-card :bordered="false">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="12">
            <a-col :xl="8" :lg="7" :md="8" :sm="24">
              <a-form-item label="公司名称" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
                <a-input placeholder="请输入公司名称" v-model="queryParam.companyName"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="8" :lg="7" :md="8" :sm="24">
              <a-form-item label="公司编号" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
                <a-input placeholder="请输入公司编号" v-model="queryParam.companyCode"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="8" :lg="7" :md="8" :sm="24">
              <a-form-item label="行业名称&代码" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
                <a-select style='width: 45%' v-model="queryParam.indsutryCodeText" placeholder="请选择" :options="categoryList" @change="categoryChange" ></a-select>
                <a-select :disabled="!queryParam.indsutryCodeText" style='width: 45%;margin-left: 10px' v-model="queryParam.indsutrySubCodeText" @change="categoryItemChange" placeholder="请选择" :options="categoryItemList" />
              </a-form-item>
            </a-col>
            <a-col  :span="24">
              <a-form-item label="省/市/区" >
                <j-area-linkage v-model="queryParam.areaLinkage2" type="select"  @change="addressChange" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!-- 查询区域-END -->

      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
        <a-button type="primary" @click="searchReset" icon="reload" >重置</a-button>
      </div>

      <!-- table区域-begin -->
      <div>
        <a-table
          ref="table"
          size="middle"
          :scroll="{x:1200,y:400}"
          bordered
          rowKey="companyCode"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="false"
          :loading="loading"
          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
          class="j-table-force-nowrap"
          @change="handleTableChange">

        </a-table>
      </div>
    </a-card>
  </a-modal>
</template>

<script>

import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import Area from '@/components/_util/Area'
import {getAction,postAction} from "@/api/manage";

export default {
    name: 'UserAssignCompany',
    mixins:[JeecgListMixin],
    data(){
      return {
        visible: false,
        confirmLoading:false,
        queryParam:{},
        areaData:[],
        userId:'',
        disableMixinCreated: true,
        columns: [
          {
            title:'公司编号',
            align:"center",
            width:150,
            ellipsis: true,
            dataIndex: 'companyCode'
          },
          {
            title:'公司名称',
            align:"center",
            dataIndex: 'companyName',
            width:200,
            ellipsis: true,
          },
          {
            title:'省',
            align:"center",
            width: 100,
            ellipsis: true,
            dataIndex: 'province'
          },
          {
            title:'市',
            align:"center",
            width: 100,
            ellipsis: true,
            dataIndex: 'city'
          },
          {
            title:'区',
            align:"center",
            width: 100,
            ellipsis: true,
            dataIndex: 'area',
          },
          {
            title:'地址',
            align:"center",
            width: 250,
            ellipsis: true,
            dataIndex: 'address'
          },
          {
            title:'行业代码',
            align:"center",
            width: 100,
            ellipsis: true,
            dataIndex: 'indsutryCode'
          },
          {
            title:'行业名称',
            align:"center",
            width: 200,
            ellipsis: true,
            dataIndex: 'indsutrySubCode'
          }
        ],
        categoryList:[],
        categoryItemList:[],
        url:{
          list:'/company/sysUserCompanyRel/list',
          categoryListUrl:'/sys/category/getCategoryByCode',
          categoryItemListUrl:'/sys/category/getCategoryItemListByPid',
          saveCompany: '/company/sysUserCompanyRel/saveCompany'
        }
      }
    },
    created() {
      this.areaData = new Area(this.$Jpcaa);
      this.dictInit();
      },
  computed:{
      title(){
        return '请选择所属公司'
      }
    },
    methods:{
      getCategoryList(){
        this.categoryItemList = [];
         getAction(this.url.categoryListUrl,{code:'B03'}).then(res=>{
             if(res.success){
               this.categoryList = res.result;
             }
         });
      },
      categoryChange(id){
         this.categoryItemList = [];
        this.queryParam.indsutryCode = this.categoryList.filter(item => item.value == this.queryParam.indsutryCodeText)[0].text;
         getAction(this.url.categoryItemListUrl,{pid:id}).then(res=>{
            if(res.success){
              this.categoryItemList = res.result;
              delete this.queryParam.indsutrySubCodeText;
            }
         });
      },
      categoryItemChange(value){
        this.queryParam.indsutrySubCode = this.categoryItemList.filter(item => item.value == value)[0].text;
      },
      dictInit(){
        this.getCategoryList();
      },
      searchReset() {
        this.queryParam = {}
        this.queryParam.objId = this.userId;
        this.categoryItemList = [];
        this.loadData(1);
      },
      show(userId){
        this.userId = userId;
        this.visible = true;
        this.onClearSelected();
        this.searchReset();
      },
      addressChange(value){
        console.info("地址："+value)
        if(value.length >= 2){
          const province = value.substring(0,2)+"0000";
          this.queryParam.province = this.areaData.all.filter(item => item.id == province)[0].text;
        }
        if(value.length >= 4){
          const city = value.substring(0,4)+"00";
          this.queryParam.city = this.areaData.all.filter(item => item.id == city)[0].text;
        }
        if(value.length >= 6){
          const area = value;
          this.queryParam.area = this.areaData.all.filter(item => item.id == area)[0].text;
        }
      },
      handleCancel() {
        this.visible = false
      },
      selectOk(){
        if(this.selectionRows.length>0){
          const params = {};
          let companys = [];
          this.selectionRows.forEach((item) => {
            companys.push(item.companyCode);
          });
          params.companyCodeList = companys;
          params.userId = this.userId;
          this.confirmLoading = true;
          postAction(this.url.saveCompany,params).then(res=>{
             if(res.success){
               this.$message.success(res.message);
               this.handleCancel();
             }else {
               this.$message.warn(res.message);
             }
          }).finally(()=>{
            this.confirmLoading = false;
          })
        }else {
          this.$message.warn("请选择数据行！");
        }
      },
    },
  watch: {
    dataSource: { // 双向数据绑定的value
      handler: function (newVal, oldVal) {
        if(newVal){
          let  hasAssignCompanys = newVal.filter(item => item.objId != null);
          if(hasAssignCompanys.length > 0){
            let companyCodeArr =  hasAssignCompanys.map(item => item.companyCode);
            this.selectedRowKeys = Object.assign([],companyCodeArr);
            this.selectionRows = Object.assign([],hasAssignCompanys);
          }

        }
      },
      deep: true
    }
  },
  }
</script>

<style scoped>

</style>